
<template>
    <div style="margin-top: 20px;margin-left: 10px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/main/echarts' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item><b>查询信息管理</b></el-breadcrumb-item>
        <el-breadcrumb-item>查询航班信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  <div class="flight-query-page" style="margin-top: 70px;">
    <el-row class="page-content">
      <el-col :span="24" class="center-content">
        <el-card class="query-form">
          <h3>查询航班信息</h3>

          <el-form :model="searchFormModelFlightLine" @submit.native.prevent="submitQueryFlightLine">
            <el-form-item label="查询条件" style="width: 400px;margin-left: 320px">
              <el-select v-model="form.addReason" placeholder="请选择" >
                <el-option label="按航班编号查询" value="FlightNumBer"></el-option>
                <el-option label="按航班路线查询" value="FlightLine"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item v-if="form.addReason === 'FlightNumBer'" label="航班编号" style="width: 400px;margin-left: 320px">
              <el-input v-model="searchFormModelFlightNumBer.FFID"></el-input>
            </el-form-item>
            <el-form-item v-if="form.addReason === 'FlightLine'" label="出发城市" style="width: 400px;margin-left: 320px">
              <el-input v-model="searchFormModelFlightLine.OPLACE"></el-input>
            </el-form-item>
            <el-form-item v-if="form.addReason === 'FlightLine'" label="到达城市" style="width: 400px;margin-left: 320px">
              <el-input v-model="searchFormModelFlightLine.APACE"></el-input>
            </el-form-item>
            <el-form-item label="出发日期" style="width: 400px;margin-left: 320px">
              <el-date-picker v-model="localDepartureDate" type="date" placeholder="选择日期" :default-time = "defaultTime">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button v-if="form.addReason === 'FlightNumBer'" type="primary" @click="submitQueryFlightNumBer" class="primary" style="width: 330px;margin-left: 390px">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button v-if="form.addReason === 'FlightLine'" type="primary" @click="submitQueryFlightLine" class="primary" style="width: 330px;margin-left: 390px">查询</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <!-- 数据表格 -->
    <div class="table">
      <el-table :data="tableFlight" stripe border style="width: 100%">
        <el-table-column prop="ffid" label="航班编号" width="200" />
        <el-table-column prop="oplace" label="始发地" width="130" />
        <el-table-column prop="past" label="出发日期" width="250"/>
        <el-table-column prop="aplace" label="目的地" width="130"/>
        <el-table-column prop="eldt" label="到达日期" width="250"/>
        <el-table-column prop="astat" label="航班状态" align="center">
          <template  #default="scope">
            <span v-if="scope.row.astat === 'ARR'" style="color: #42b983;font-size: 15px">
              <el-button type="success" style="width: 90px" round>到达</el-button>
            </span>
            <span v-if="scope.row.astat === 'ONR'" style="color: #42b983;font-size: 15px">
              <el-button type="success" style="width: 90px" round>起飞</el-button>
            </span>
            <span v-if="scope.row.astat === 'ONR'" style="color: #42b983;font-size: 15px">
              <el-button type="warning" style="width: 90px" round>延误</el-button>
            </span>
          </template>

        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>

import request from "@/utils/request";
import {onMounted, reactive, ref, watch} from "vue"
import {ArrowRight} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {Edit, Search, Sort} from "@element-plus/icons";
let userstr = sessionStorage.getItem('username')
const token = JSON.parse(userstr).token

// 响应式数据：表单和表格
const form =reactive({
  addReason : 'FlightNumBer'
})

const submitQueryFlightNumBer= () => {

  const formattedDate = localDepartureDate.value.toLocaleDateString(); // 转换为 ISO 字符串

  request({
    url: '/query/queryflight/queryflightbyffid',
    method: 'get',
    params: {
      ...searchFormModelFlightNumBer,
      PAST:  formattedDate // 将本地时间转换为 UTC
    },
    headers: {
      'token': token
    }
  }).then(res => {
    if (200 == res.data.errorCode) {
      //请求成功后将数据上传到表格
      tableFlight.value = res.data.data
    }
  })
}
const submitQueryFlightLine= () => {

  const formattedDate = localDepartureDate.value.toLocaleDateString(); // 转换为 ISO 字符串

  request({
    url: '/query/queryflight/queryflightbyffid',
    method: 'get',
    params: {
      ...searchFormModelFlightLine,
      PAST:  formattedDate // 将本地时间转换为 UTC
    },
    headers: {
      'token': token
    }
  }).then(res => {
    if (200 == res.data.errorCode) {
      //请求成功后将数据上传到表格
      tableFlight.value = res.data.data
    }
  })
}
///////// 表格 //////////////////
//表格数据
const tableFlight = ref([])

//表单的引用
const searchFormRef=ref()
//数据提交数据模型航班号
const searchFormModelFlightNumBer =reactive({
  FFID : '',
  PAST : '',
})
//数据提交数据模型航线
const searchFormModelFlightLine =reactive({
  PAST : '',
  OPLACE : '',
  APACE : ''
})
//表单存储数据模型
const saveFormModel =reactive({
  ffid : '',
  oplace : '',
  aplace : '',
  past : '',
  eldt : '',
  astat : ''
})

// 用于存储选定的本地出发日期的引用
const localDepartureDate = ref(new Date()); // 初始化为当前日期/时间
</script>

<style scoped>
.page-header, .page-footer {
  text-align: center;
  padding: 10px 0;
  color: #333; /* 文字颜色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
}
.query-form, .results {
  margin: 20px;
}
.query-form {
  background-color: white; /* 表单背景 */
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
}

.query-form h3 {
  color: #337ab7; /* 蓝色标题 */
  border-bottom: 2px solid #337ab7; /* 标题下划线 */
  padding-bottom: 10px;
  margin-bottom: 20px;
}


/* 表单输入项和按钮样式 */
.query-form .el-input__inner,
.query-form .el-date-editor.el-input,
.query-form .primary {
  border-radius: 4px; /* 圆角边框 */
  border-color: #337ab7; /* 输入框和按钮的边框颜色 */
}
.primary{
  margin: auto;
}

.query-form .primary {
  background-color: #337ab7; /* 主按钮背景色 */
  color: white;
}
.results-container {
  margin-top: 20px; /* 与上一个元素的间距 */
}

.results {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.results .el-table {
  margin-top: 10px; /* 表格与标题的间距 */
}

/* 分页组件样式 */
.results .el-pagination {
  margin-top: 15px;
  text-align: center;
}

 .flight-query-page {
   max-width: 1200px;
   margin: 0 auto; /* 页面内容水平居中 */
 }

/* 适配移动端 */
@media (max-width: 768px) {
  .page-header, .page-footer {
    margin: 20px 0;
  }

  .query-form h3 {
    margin-bottom: 15px;
  }
}
.el-form-item__label {
  width: 100px; /* 根据需要调整标签宽度 */
}

.center-content {
  justify-content: center;
}
</style>